<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="form-container">
			<input class="input-field" v-model="username" placeholder="请输入用户名" />
			<!-- <input class="input-field" v-model="password" placeholder="请输入密码" type="password" /> -->
			<button class="btn-login" @click="handleLogin">登录</button>
			<button class="btn-register" @click="handleRegister">注册</button>
			<!-- 新增：发送邮件按钮 -->
			<button class="btn-mail" @click="handleSendMail">发送邮件</button>
		</view>
	</view>
</template>

<script>
import request from '@/utils/request'; // 引入统一的请求模块

export default {
	data() {
		return {
			title: 'Hello',
			username: '',
			password: ''
		};
	},
	onLoad() { },
	methods: {
		handleLogin() {
			// 调用登录接口
			request.post(`/login?username=${this.username}`) // 修改: 将用户名拼接到 URL 上
				.then(response => {
					console.log('登录成功:', response);

					// 登录成功后保存用户名到本地
					uni.setStorageSync('username', this.username);
					uni.navigateTo({
						url: '/pages/index/select'
					});
				})
				.catch(error => {
					console.error('登录失败:', error);
					uni.showToast({
						title: '登录失败，请稍后重试',
						icon: 'none'
					});
				});
		},
		handleRegister() {
			// 调用注册接口
			request.post('/register', {
				username: this.username,
				password: this.password
			}).then(response => {
				console.log('注册成功:', response);

				// 注册成功后保存用户名到本地
				uni.setStorageSync('username', this.username);
				uni.navigateTo({
					url: '/pages/index/select'
				});

			}).catch(error => {
				console.error('注册失败:', error);
				uni.showToast({
					title: '注册失败，请稍后重试',
					icon: 'none'
				});
			});
		},
		// 新增：发送邮件方法
		handleSendMail() {
			uni.navigateTo({
				url: '/pages/index/mail'
			});
		}
	}
};
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.form-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.input-field {
	width: 80%;
	height: 80rpx;
	margin-bottom: 30rpx;
	padding: 10rpx;
	border: 1px solid #ccc;
	border-radius: 10rpx;
}

.btn-login,
.btn-register,
.btn-mail {
	width: 80%;
	height: 80rpx;
	margin-bottom: 30rpx;
	background-color: #007aff;
	color: white;
	border-radius: 10rpx;
}

.btn-register {
	background-color: #ff9500;
}

.btn-mail {
	background-color: #4caf50; /* 绿色背景 */
}
</style>